<template>
  <div class="app-container">
<!--&#45;&#45; 图表容器 &ndash;&gt;-->
    <div ref="chart" style="width: 100%; height: 500px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { listPoints2 } from "@/api/points/points";

export default {
  name: "Points",
  data() {
    return {
      loading: true,
      pointsList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        points: null,
      },
      chart: null, // ECharts 实例
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.initChart(); // 初始化图表
  },
  methods: {
    /** 查询用户积分账户列表 */
    getList() {
      this.loading = true;
      listPoints2(this.queryParams).then(response => {
        this.pointsList = response.rows;
        this.total = response.total;
        this.updateChart(); // 更新图表数据
        this.loading = false;
      });
    },

    /** 初始化 ECharts 图表 */
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption({
        title: { text: '用户积分排行榜' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: [] },
        yAxis: { type: 'value' },
        series: [
          {
            type: 'bar', // 可以改为 'line' 来显示折线图
            data: [],
            itemStyle: {
              color: '#409EFF', // 设置柱状图颜色
            },
          },
        ],
      });
    },

    /** 更新图表数据 */
    updateChart() {
      const userNames = this.pointsList.map(item => `用户${item.userId}`);
      const pointsData = this.pointsList.map(item => item.points);

      this.chart.setOption({
        xAxis: { data: userNames },
        series: [{ data: pointsData }],
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
